<template>
  <div>
    <router-view></router-view>
    <div v-if="$route.name==='话题'">
    <!-- 添加弹出框-->
    <el-dialog
      title="添加话题"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :hide-required-asterisk="true"
        :status-icon="true"
        :rules="rules"
        ref="ruleForm"
      >
        <!-- <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
        >
        //:file-list="fileList" 
          话题图标：<el-button size="small" type="primary">点击上传</el-button>
          <span slot="tip" class="el-upload__tip"
            >只能上传jpg/png文件，且不超过500kb</span
          >
        </el-upload> -->
        <!-- 上传图标 -->
<form>
  <input type="file" @change="getFile($event)"/>
  <button @click="submit($event)">提交</button>
</form>
        <el-form-item
          label="话题名称"
          prop="addSujetName"
          :label-width="formLabelWidth"
        >
          <el-input class="inp1" v-model="ruleForm.addSujetName"></el-input>
        </el-form-item>
        <el-form-item
          label="话题简介"
          prop="addSujetRepresentation"
          :label-width="formLabelWidth"
        >
          <el-input
            class="inp1"
            v-model="ruleForm.addSujetRepresentation"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="话题详情"
          prop="addSujetDetails"
          :label-width="formLabelWidth"
        >
          <el-input class="inp1" v-model="ruleForm.addSujetDetails"></el-input>
        </el-form-item>
        <el-form-item
          label="话题标题"
          prop="addSujetTitle"
          :label-width="formLabelWidth"
        >
          <el-input class="inp1" v-model="ruleForm.addSujetTitle"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="addSujetTitle()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑弹出框 -->
    <el-dialog
      title="修改话题"
      :visible.sync="changeDialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :hide-required-asterisk="true"
        :status-icon="true"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item
          label="话题名称"
          prop="changeSujetName"
          :label-width="formLabelWidth"
        >
          <el-input class="inp1" v-model="ruleForm.changeSujetName"></el-input>
        </el-form-item>
        <el-form-item
          label="话题简介"
          prop="changeSujetRepresentation"
          :label-width="formLabelWidth"
        >
          <el-input
            class="inp1"
            v-model="ruleForm.changeSujetRepresentation"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="话题详情"
          prop="changeSujetDetails"
          :label-width="formLabelWidth"
        >
          <el-input
            class="inp1"
            v-model="ruleForm.changeSujetDetails"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="话题标题"
          prop="changeSujetTitle"
          :label-width="formLabelWidth"
        >
          <el-input class="inp1" v-model="ruleForm.changeSujetTitle"></el-input>
        </el-form-item>
        <el-form-item
          label="话题图标"
          prop="changeSujetPic"
          :label-width="formLabelWidth"
        >
          <el-input class="inp1" v-model="ruleForm.changeSujetPic"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeDialogVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="changeSujetTitle()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 删除弹出框 -->
    <el-dialog
      title="删除话题"
      :visible.sync="delDialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :hide-required-asterisk="true"
        :status-icon="true"
        :rules="rules"
        ref="ruleForm"
      >
        <span>确定删除此条话题？</span>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="delSujetTitle()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-input
      class="input1"
      placeholder="请输入要查询的用户"
      prefix-icon="el-icon-search"
      v-model="msg"
      clearable
    ></el-input>
    <el-button type="primary" class="bnt1" @click="addSujet()"
      >添加话题</el-button
    >
    <el-card
      class="el-card"
      shadow="hover"
      v-for="(item, index) in search"
      :key="index"
    >
             <div class="btnImg">
                <div class="img" @click="changeDigitalCategory(item)"></div>
      
           <div class="btnAll">
        <el-button type="warning" plain @click="changeSujet(item)" size="mini"
          >更改信息</el-button
        >
        <el-button type="danger" plain @click="delSujet(item)" size="mini"
          >删除</el-button
        >
        </div>
          {{ item.topic_image_id }}
         <div class="name" @click="changeDigitalCategory(item)">{{ item.topic_name }}</div>
      <span class="administorName">{{ item.administrators_name }}</span
      ><br />
      <span class="data">{{ item.topic_create_date }}</span
      ><br />
      <span class="title">标题</span
      ><span class="content">{{ item.topic_head }}</span
      ><br />
      <span class="title">简介</span>
      <div class="introduction">{{ item.topic_introduction }}</div>
      <span class="title">详情</span>
      <div class="content">{{ item.topic_details }}</div>
      <span class="title">讨论量</span>
      <span class="content">{{ item.topic_discussion_numbe }}</span><br />
      <span class="title">热度</span>
      <span class="content">{{ item.topic_hot_number }}</span>
      </div>
 </el-card>
     </div>
  </div>
</template>
<script>
import util from '../lib/index.js';
export default {
  data() {
    var valiDateAddSujetName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入话题名称'));
      } else {
        callback();
      }
    };
    var valiDateAddSujetRepresentation = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入话题简介'));
      } else {
        callback();
      }
    };
    var valiDateaAdSujetDetails = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入话题详情'));
      } else {
        callback();
      }
    };
    var valiDateAddSujetTitle = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入话题标题'));
      } else {
        callback();
      }
    };
    var valiDateChangeSujetName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('话题名称不能为空'));
      } else {
        callback();
      }
    };
    var valiDateChangeSujetRepresentation = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('话题简介不能为空'));
      } else {
        callback();
      }
    };
    var valiDateChangeSujetDetails = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('话题详情不能为空'));
      } else {
        callback();
      }
    };
    var valiDateChangeSujetTitle = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('话题标题不能为空'));
      } else {
        callback();
      }
    };
    var valiDatCchangeSujetPic = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入话题标题'));
      } else {
        callback();
      }
    };
    return {
      file: [],
      formLabelWidth: '140px',
      list: [],
      msg: '',
      res: [],
      dialogVisible: false,
      changeDialogVisible: false,
      delDialogVisible: false,
      input: '',
      number: 0,
      hotNumber: 0,
      adId: 0,
      imgId: 0,
      topId: 0,
      delId: 0,
      res: [],
      file:'',
      ruleForm: {
        //添加
        addSujetName: '',
        addSujetRepresentation: '',
        addSujetDetails: '',
        addSujetTitle: '',
        //修改
        changeSujetName: '',
        changeSujetRepresentation: '',
        changeSujetDetails: '',
        changeSujetTitle: '',
        changeSujetPic: '',
        //删除
        delSujetName: '',
        delSujetRepresentation: '',
        delSujetDetails: '',
      },
      rules: {
        addSujetName: [{ validator: valiDateAddSujetName, trigger: 'blur' }],
        addSujetRepresentation: [
          { validator: valiDateAddSujetRepresentation, trigger: 'blur' },
        ],
        addSujetDetails: [
          { validator: valiDateaAdSujetDetails, trigger: 'blur' },
        ],
        addSujetTitle: [{ validator: valiDateAddSujetTitle, trigger: 'blur' }],
        //修改
        changeSujetName: [
          { validator: valiDateChangeSujetName, trigger: 'blur' },
        ],
        changeSujetRepresentation: [
          { validator: valiDateChangeSujetRepresentation, trigger: 'blur' },
        ],
        changeSujetDetails: [
          { validator: valiDateChangeSujetDetails, trigger: 'blur' },
        ],
        changeSujetTitle: [
          { validator: valiDateChangeSujetTitle, trigger: 'blur' },
        ],
        changeSujetPic: [
          { validator: valiDatCchangeSujetPic, trigger: 'blur' },
        ],
      },
    };
  },
  mounted() {
    util.topicAllTitle({}).then((res) => {
      this.list = res.data.data;
      console.log(this.list)
    });
  },
  methods: {
    //添加话题
    addSujet() {
      this.dialogVisible = true;
    },
    //添加话题内容弹窗关闭
    addSujetTitle() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          util
            .topicAddTitle({
              topicContent: {
                topic_name: this.ruleForm.addSujetName,
                topic_discussion_number: 0,
                topic_hot_number: this.hotNumber,
                topic_head: this.ruleForm.addSujetTitle,
                topic_introduction: this.ruleForm.addSujetRepresentation,
                topic_details: this.ruleForm.addSujetDetails,
                topic_image_id: 0,
                administrators_id: 0,
                administrators_name: '超级管理员',
              },
            })
            .then((res) => {
              console.log(res);
              util.topicAllTitle().then((res) => {
                // console.log(res);
                this.list = res.data.data;
                // console.log('hahaha');
              });
            });
          this.dialogVisible = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //修改话题内容
    changeSujet(row) {
      this.changeDialogVisible = true;
      // console.log('item', item);
      // console.log('row', row);
      this.ruleForm.changeSujetName = row.topic_name;
      this.ruleForm.changeSujetDetails = row.topic_details;
      this.ruleForm.changeSujetRepresentation = row.topic_introduction;
      this.ruleForm.changeSujetTitle = row.topic_head;
      this.ruleForm.changeSujetPic = row.topic_image_id;
      this.number = row.topic_discussion_number;
      this.hotNumber = row.topic_hot_number;
      this.administratorsName = row.administrators_name;
      this.adId = row.administrators_id;
      this.imgId = row.topic_image_id;
      this.topId = row.topic_id;
    },

    //修改话题内容弹窗关闭
    changeSujetTitle() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          util
            .topicChangeTitle({
              topicContent: {
                topic_id: this.topId,
                topic_name: this.ruleForm.changeSujetName,
                topic_discussion_number: this.number,
                topic_hot_number: this.hotNumber,
                topic_head: this.ruleForm.changeSujetTitle,
                topic_introduction: this.ruleForm.changeSujetRepresentation,
                topic_details: this.ruleForm.changeSujetDetails,
                topic_image_id: this.imgId,
                administrators_id: this.adId,
                administrators_name: this.administratorsName,
              },
            })
            .then((res) => {
              console.log(res);
              util.topicAllTitle().then((res) => {
                // console.log(res);
                this.list = res.data.data;
              });
            });
          this.changeDialogVisible = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //删除话题内容
    delSujet(row) {
      this.delDialogVisible = true;
      this.delId = row.topic_id;
      // console.log(this.delId);
    },
    //删除话题内容弹窗关闭
    delSujetTitle() {
      this.$refs.ruleForm.validate((valid) => {
        console.log(this.delId);
        if (valid) {
          util
            .topDel({
              topic_id: this.delId,
            })
            .then((res) => {
              console.log(res);
              util.topicAllTitle().then((res) => {
                this.list = res.data.data;
              });
            });
          this.delDialogVisible = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //跳转话题内容
    changeDigitalCategory(item) {
      console.log(item);
      util
        .topicAll({
          topic_id: item.topic_id,
          pages: 1,
        })
        .then((res) => {
          this.res = res;
          console.log(this.res);
          this.$router.push({
            path: 'sujet/sujetContent/'+item.topic_id,
          });
        });
    },
    handleClose() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //文件
    getFile(event){
        this.file=event.target.files[0];
        console.log(this.file);
    },
    submit(event){
      event.preventDefault();
      let formData=new FormData();
      formData.append('file',this.file);
      axios.post('/api/',formData).then(function(response){
        console.log(response);
      }).catch(function(error){
        alert('上传失败');
        console.log('error');
        window.location.reload();
      })
    }
  },
  computed: {
    search() {
      let arr = [];
      for (let i = 0; i < this.list.length; i++) {
        if (
          this.list[i].topic_name.indexOf(this.msg) !== -1 ||
          this.list[i].topic_introduction.indexOf(this.msg) !== -1 ||
          this.list[i].topic_head.indexOf(this.msg) !== -1
        ) {
          arr.push({
            administrators_name: this.list[i].administrators_name,
            topic_create_date: this.list[i].topic_create_date,
            topic_details: this.list[i].topic_details,
            topic_discussion_number: this.list[i].topic_discussion_number,
            topic_head: this.list[i].topic_head,
            topic_hot_number: this.list[i].topic_hot_number,
            topic_introduction: this.list[i].topic_introduction,
            topic_name: this.list[i].topic_name,
            administrators_id: this.list[i].administrators_id,
            topic_id: this.list[i].topic_id,
            topic_image_id: this.list[i].topic_image_id,
          });
        }
      }
      // console.log(arr);
      return arr;
    },
  },
};
</script>
<style scoped>
.el-input {
    width: 300px;
    margin-left: 30px;
  }
  .el-card {
    width: 700px;
    margin: 0 auto;
    margin-bottom: 50px;
    padding: 20px -10px 20px 20px;
  }
  .input1 {
    margin-bottom: 30px;
  }
  .bnt1 {
    margin-bottom: 30px;
    margin-left: 50px;
  }
  .img {
    width: 50px;
    height: 50px;
    border: 1px solid gray;
    display: inline-block;
  }
  .name {
    display: inline-block;
    position: relative;
    top: -30px;
    margin-left: 60px;
  }
  .administorName {
    color: gray;
    font-size: 12px;
     position: relative;
    top: -30px;
     margin-left: 5px;
  }
  .data {
    position: relative;
    right: -60px;
    top: -30px;
    font-size: 12px;
    color: gray;
  }
  .title {
    font-weight: bolder;
    font-size: 13px;
  }
  .btnAll {
    margin-left: 400px;
    margin-top: -50px;
  }
</style>